<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通用轮播图</title>
  <style>
    * {margin: 0; padding: 0;}
    .banner {
      width: 300px;
      height: 150px;
      outline: 2px solid red;
      margin: 50px auto;
      
    }
    .item-container {
      overflow-x: hidden;
      width: 100%;
      height: 100%;
      display: flex;
      text-align: center;
      line-height: 150px;
    }
    .item {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      text-transform: uppercase;
      outline: 1px solid yellow;
      background-color: rgba(255, 68, 0,.5);
    }
  </style>
</head>
<body>
  <!-- 轮播图的html部分 -->
  <div class="banner">
    <div class="item-container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item1</div>
    </div>
  </div>
  <script>
    function $(selector) {
      return document.querySelector(selector);
    }
    function $$(selector) {
      return document.querySelectorAll(selector);
    }
    /*
    container:为那个区域设置轮播
    duration：多长时间轮播一次，0表示不自动轮播
    callback：轮播结束后的回调函数,
    */
    function createSlider(container,duration,callback) {
      //找到container下的第一个子元素，设置其的margin-left就可以实现轮播
      let firstItem = container.querySelector('.item');
      //获取容器的宽度
      let cw = container.clientWidth;
      //获取子元素的数量
      let count = container.children.length;
      //让轮播的时候有动画，而不是一下就过去的
      firstItem.style.transition = '1s';
      //定义定时器
      let timer = null;
      //记录当前的索引
      let currentIndex = 0;
      //切换到指定的子项
      function switchTo(index) {
        if (index < 0) { index = 0; }
        if(index > count-1) { index = count - 1; }
        currentIndex = index;
        firstItem.style.marginLeft = -index * cw + 'px';
        //触发回调函数
        callback && callback(index);
      }
      //实现自动切换
      function autoPlay() {
        if (timer || duration === 0) {
          return;
        }
        timer = setInterval(() => {
          switchTo((currentIndex+1)%count)
        }, duration);
      }
      autoPlay();
      //停止自动切换
      function stopAutoPlay() {
        clearInterval(timer);
        timer = null;
      }
      //手指滑动切换
      container.ontouchstart = function (e) {
        //手指移上去的时候需要停止自动切换
        stopAutoPlay();
        //不需要过渡效果
        firstItem.style.transition = 'none';
        let x = e.touches[0].clientX;
        // 获取第一个元素的marginleft值，以便于让其与手指移动的距离相等
        let ml = parseFloat(firstItem.style.marginLeft) || 0;
        //当手指在上面移动的时候
        container.ontouchmove = function(e) {
          //最大和最小可以滑动的距离
          let minMl = -(count - 1) * cw;
          //获取移动的距离
          let disX = e.touches[0].clientX - x;
          //得到新的距离
          let newMl = ml + disX;
          if(newMl < minMl) {
            newMl = minMl;
          }
          if (newMl > 0) {
            newMl = 0;
          }
          //去掉浏览器的默认行为
          e.preventDefault();
          //设置firstItem的marginleft值
          firstItem.style.marginLeft = newMl + 'px';
        }
        //手指放开的时候 -> 1.如果是向左滑动，松开手指的时候应该取整，反正也一样 2. 开启自动切换
        container.ontouchend = function(e) {
          //手指在横轴上移动了多远
          var disX = e.changedTouches[0].clientX - x; 
          //将过渡动画设置回去
          firstItem.style.transition = '1s';
          if (disX < -30) {
            switchTo(currentIndex + 1);
          }
          if(disX > 30){
            switchTo(currentIndex - 1);
          }
          //开启自动切换
          autoPlay();
        }
      }
      return switchTo;
    }

    let goto = createSlider($('.banner .item-container'),3000,function(index) {
      console.log(index)
    });
  </script>
</body>
</html>